<template>
  <div class="system-role-container">
    <el-card shadow="hover">

      <div class="system-user-search mb10">
        <pageSearch
        :searchformConfig="searchConfig"
        @handleQueryClick="handleQueryClick"
        @handleResetClick="handleResetClick"
        @handleAddClick="onOpenAddRole"
        ></pageSearch>

      </div>
      <el-table-plus :pagination="pagination" :data="tableData.data" :columns="columns" 
        :total="pagination.total" @page-change="handlePageChange" @prev-click="handlePageChange" @next-click="handlePageChange">
        <template #handle="{ cellValue, row, column }">
          <el-button type="primary" text size="small" @click="handleEdit({ cellValue, row, column })" v-if="tableData.auth.edit">编辑</el-button>
          <el-button type="danger" text size="small" @click="handleDel({ cellValue, row, column })" v-if="tableData.auth.delete">删除</el-button>
        </template>
        <template #handleTitle>操作</template>
      </el-table-plus>
    </el-card>

    <Form ref="formRef" @on-load="handleQueryClick"/>
  </div>
</template>

<script lang="ts">
import { ref,toRefs, reactive ,onMounted , watchEffect,defineComponent} from "vue"
import { platformApi } from '/@/api/requests/platform'
import usePag from '/@/utils/table'
import Form from '/@/views/requests/platform/form.vue'
import pageSearch from '/@/components/search/page-search.vue';
import { IForm } from '/@/types/form/search';
import { success,confirm } from '/@/utils/msg'
import {checkAuth} from '/@/utils/authFunction'

export default defineComponent({
  name: 'platform',
  components: { Form ,pageSearch},
  setup() {
    const formRef = ref()
    // 分页设置
    const { PagStore } = usePag()
    // 表头数据
    const columns: any = [
        { label: "序号", type: "index", prop: "index", width: "60" },
        { label: "英文名称", prop: "en_name" },
        { label: "中文名称", prop: "cn_name" },
        { label: "业务领域", prop: "field" },
        { label: "角色描述", prop: "remarks" },
        {
            label: "操作",
            fixed: "right",
            prop: "handle",
            width: "120",
            align: "right",
            slots: {
                customRender: "handle",
                customTitle: "handleTitle",
            },
        }
    ];
    // 表格数据
    const state = reactive({
      tableData : {
        data: [],
        params :{
            id:'',
            keys:''
        },
        auth:{
          edit :  true,// checkAuth('requests/platform/update'),
          delete : true,//checkAuth('requests/platform/delete')
        }
      }
    })

    // 分页
    const pagination = reactive({...state.tableData.params,...PagStore});

    // 加载列表
    const dataList = async() => {
      const {currentPage,pageSize} = {...pagination}
      const param = {...state.tableData.params,pageSize,currentPage}
      return await platformApi().dataList(param)
    }

    // 删除
    const deleteForm = async(param) => {
      return await platformApi().delete(param)
    }

    // 初始化数据列表
    const initTableData = async() => {
      const ds = await dataList()
      const { data , total } = {...ds}
      pagination.total = total
      state.tableData.data = data
    }

    // 页面加载时
    onMounted(() => {
      initTableData()

      console.log(state.tableData.auth)
    })

    const colAttrs = {
      align: "left",
    };
 
    // 删除角色
    const handleDel = async(a : any) => {
      confirm(`此操作将永久删除：“${a.row.cn_name}”，是否继续?`).then(async() => {
        const { code,msg } = await deleteForm(a.row)
        if ( code == 0 || code == true ) {
            success(msg)
            initTableData()
        }
      }).catch(()=>{})
    }

    // 编辑
    const handleEdit = (a: any) => {
        formRef.value.openDialog(a.row,'编辑')
    }

    // 选择页面重新加载
    const handlePageChange = (a: any) => {
      pagination.currentPage = a.currentPage
      initTableData()
    }

    // 打开新增角色弹窗
    const onOpenAddRole = (a:any) => {
        formRef.value.openDialog({})
    }

    // 查询
    const handleQueryClick = (value: any) => {
        state.tableData.params = {...value}
        initTableData()
    }

    // 重置
    const handleResetClick = () => {
        console.log('重置');
    };

    // 搜索配置
    const searchConfig: IForm = {
      formItems: [
        {field: 'keys',type: 'input',label: '用户名',placeholder: '请输入 关键字'}
      ]
    }
   
    return {
      onOpenAddRole,
      handlePageChange,
      handleEdit,
      handleDel,
      handleQueryClick,
      handleResetClick,
      searchConfig,
      formRef,
      colAttrs,
      columns,
      pagination,
      ...toRefs(state)
    }
  }
})
</script>
